<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>热门景点销量数据</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <style>
        .chart-card {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin: 20px auto;
            max-width: 950px;
            transition: transform 0.3s ease;
        }
        .chart-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }
        .chart-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .chart-title {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        .chart-description {
            font-size: 14px;
            color: #666;
            max-width: 800px;
            margin: 0 auto 15px;
        }
        .chart-container {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="chart-card">
    <div class="chart-header">
        <div class="chart-title">热门景点销售排行</div>
        <div class="chart-description">展示销量最高的景点排行，反映游客偏好和景点热度</div>
    </div>
    <div id="chart-container" class="chart-container"></div>
</div>

<script>
    var chart = echarts.init(document.getElementById('chart-container'), 'white');
    var option = {
        tooltip: {
            trigger: "axis",
            formatter: '{b}: {c}张门票',
            backgroundColor: 'rgba(255,255,255,0.95)',
            borderColor: '#ddd',
            textStyle: { color: '#333' },
            axisPointer: { type: 'shadow' }
        },
        legend: {
            data: ["热门景点销量"],
            bottom: 10
        },
        grid: {
            left: '25%',
            right: '5%',
            top: '10%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name: '销量（张）',
            nameTextStyle: { fontWeight: 'bold' },
            axisLine: { show: true }
        },
        yAxis: {
            type: 'category',
            name: '景点名称',
            axisLabel: {
                interval: 0,
                formatter: function(value) {
                    return value.length > 10 ? value.substring(0,8) + '...' : value;
                }
            },
            nameTextStyle: { fontWeight: 'bold' }
        },
        series: [{
            name: "热门景点销量",
            type: "bar",
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: '#ffd666' },
                    { offset: 1, color: '#ff9c6e' }
                ]),
                borderRadius: [0, 5, 5, 0]
            },
            label: {
                show: true,
                position: 'right',
                formatter: '{c}',
                fontWeight: 'bold',
                color: '#ff7a45'
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
            }
        }],
        dataZoom: [{
            type: 'slider',
            yAxisIndex: 0,
            show: true,
            realtime: true,
            width: 15,
            right: 5,
            fillerColor: 'rgba(255, 157, 110, 0.2)'
        }]
    };
    chart.setOption(option);

    fetch('/menu/hot_sales_attractions')
        .then(response => response.json())
        .then(data => {
            option.yAxis.data = data.attractions;
            option.series[0].data = data.sales;
            chart.setOption(option);
        })
        .catch(error => {
            console.error('获取数据失败:', error);
            chart.setOption({
                title: {
                    text: '数据加载失败',
                    subtext: error.message || '请稍后重试',
                    left: 'center',
                    top: 'center',
                    textStyle: { color: '#ff4d4f', fontSize: 18 }
                }
            });
        });

    // 响应式调整
    window.addEventListener('resize', function() {
        chart.resize();
    });
</script>
</body>
</html>